<template>
  <div class="login">
    <div class="loginBox" id="login">
      <RegPublicHead></RegPublicHead>
      <div class="loginList">
        <div class="content">
          <div class="loginBox" v-show="isreset == false">
            <div class="login-form">
              <h2 class="form-title">申报系统登录</h2>
              <el-form :model="loginForm" ref="loginForm" :rules="rules">
                <el-form-item prop="username">
                  <el-input prefix-icon="el-icon-user" v-model="loginForm.username" auto-complete="off"
                    placeholder="输入账号">
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" auto-complete="off"
                    placeholder="输入密码">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox style="width:100px;" v-model="remember">记住密码</el-checkbox>
                  <a href='http://gxj.lanzhou.gov.cn:8830/' class="toadmin">后台管理</a>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:300px;" @click="submitForm"
                  >登录</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="text" style="width:100px;" @click="goToRegister">注册账号</el-button>
                  <span style="color: #1CA9FF;">|</span>
                  <el-button type="text" style="width:100px;" @click="goToForgetPassword">忘记密码</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="loginBox" v-show="isreset == true">
            <div class="login-form">
              <h2 class="form-title" style="margin-top: 22px;">忘记密码</h2>
              <el-form :model="registerForm" ref="registerForm" :rules="rules1">
                <el-form-item prop="phone">
                  <el-input prefix-icon="el-icon-user" v-model="registerForm.phone" auto-complete="off"
                    placeholder="输入手机号">
                  </el-input>
                </el-form-item>
                <el-form-item label-width="0" inline prop="captcha">
                  <el-input prefix-icon="el-icon-chat-dot-square" v-model="registerForm.captcha" placeholder="请输入验证码"
                    style="width: 195px;"></el-input>
                  <el-button type="primary" style="margin-left: 10px;" @click="getCaptcha">获取验证码</el-button>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" prefix-icon="el-icon-lock" v-model="registerForm.password" auto-complete="off"
                    placeholder="输入密码">
                  </el-input>
                </el-form-item>
                <el-form-item prop="confirm">
                  <el-input type="password" prefix-icon="el-icon-lock" v-model="registerForm.confirm" auto-complete="off"
                    placeholder="确认密码">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:300px;" @click="resetPass">确认修改</el-button>
                </el-form-item>
                <div class="tiaozhuan">
                  <p @click="isreset = false" style="cursor: pointer;">去登录</p>
                  <!-- <el-button type="primary" size="medium" @click="isreset = false">去登录</el-button> -->
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div class="shifan">
        <div class="content">
          <div class="shifanBox">

            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/pingtai.e69d4b28.png" alt="">
              </div>
              <div class="text-1">平台/基地申报</div>
              <div class="text-2">PINGTAI/JIDISHENBAO</div>
              <div class="text-3" @click="error('#login')">
                <el-button>示范平台申报</el-button>
                <el-button>示范基地申报</el-button>
              </div>
            </div>
            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/jidi.png" alt="">
              </div>
              <div class="text-1">平台/基地考核</div>
              <div class="text-2">PINGTAI/JIDIKAOHE</div>
              <div class="text-3" @click="error('#login')">
                <el-button>示范平台考核</el-button>
                <el-button>示范基地考核</el-button>
              </div>
            </div>
            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/jigou.13b86ba5.png" alt="">
              </div>
              <div class="text-1">入驻机构</div>
              <div class="text-2">RU ZHU JI GOU</div>
              <div class="text-3" @click="error('#login')">
                <el-button>入驻机构申报</el-button>
                <el-button>入驻机构考核</el-button>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="gonggao">
        <div class="content">

          <div class="gonggaoBox" v-show="activeTab == 'list1'">
            <div class="gonggaoTitle">
              <div class="left">
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">公告信息</p>
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">GONGGAOXINXI</p>
              </div>
              <div class="right">
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">公示信息</p>
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">GONGSHIXINXI</p>
              </div>
            </div>
            <div class="item" @click="error('#login')" v-for="(item, index) in gonggaolist" :key="index">
              <div class="sanjiao"></div>
              <div>正在进行</div>
              <div>{{ item.title }}</div>
              <div>{{ item.gmtCreate }}</div>
            </div>

            <div class="listButton" @click="error('#login')">
              点击查看更多
            </div>
            <el-empty v-if="gonggaolist.length < 1" description="暂时还没有公告"></el-empty>
          </div>
          <div class="gonggaoBox" v-show="activeTab == 'list2'">
            <div class="gonggaoTitle">
              <div class="left">
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">公告信息</p>
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">GONGGAOXINXI</p>
              </div>
              <div class="right">
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">公示信息</p>
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">GONGSHIXINXI</p>
              </div>
            </div>
            <div class="item" @click="error('#login')" v-for="(item, index) in gonggaolist" :key="index">
              <div class="sanjiao"></div>
              <div>正在进行</div>
              <div>{{ item.title }}</div>
              <div>{{ item.gmtCreate }}</div>
            </div>

            <div class="listButton" @click="error('#login')">
              点击查看更多
            </div>
            <el-empty v-if="gonggaolist.length < 1" description="暂时还没有公示"></el-empty>
          </div>
        </div>
      </div>
      <div class="qiye">
        <div class="content">
          <div class="qiyeBox">
            <div class="qiyeBoxTitle">
              <p style="width:100%;">企业留言</p>
              <p >QIYELIUYAN</p>
            </div>
            <div class="item" @click="error('#login')">
              <div class="left">
                <img src="../assets/img/zixun.png" alt="">
              </div>
              <div class="right">
                <div>{{ zixunCount }}</div>
                <p style="width: 100%;">困难问题</p>
              </div>
            </div>
            <div class="item" @click="error('#login')">
              <div class="left">
                <img src="../assets/img/xuqiu.png" alt="">
              </div>
              <div class="right">
                <div class="xuqiu">RONGZIXUQIU</div>
                <p style="width: 100%;">融资需求</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <PublicFoot></PublicFoot>
    </div>
  </div>
</template>

<script>
import RegPublicHead from '../components/RegPublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { user_login, gonggao_list, countStatus, user_send, user_reset, message_tousuCount, message_yijianCount, message_zixunCount } from '../api/api';
export default {
  data() {
    return {
      isreset: false,
      activeTab: 'list1',
      remember: false,
      loginForm: {
        username:'' ,
        password:'',
      },
      gonggaolist: [],
      currentPage: {
        page: '1', size: '7', type: '0'
      },
      registerForm: {
        phone: '',
        password: '',
        confirm: '',
        captcha: '',
      },
      count: {
        pintai: '',
        jidi: '',
        jigou: '',
      },
      tousuCount: '',
      yijianCount: '',
      zixunCount: '',
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      rules1: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+~`\-={}[\]:;"'<>,.?/\\|])(?=.*[^\s]).{8,}$/, message: '密码必须是8位且具有大小写字母、数字和字符', trigger: 'blur' }
        ],
        confirm: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.confirm, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // // 提交登录表单
          const Base64 = require("js-base64").Base64
          this.loginForm.password = Base64.encode(this.loginForm.password);// base64加密
          user_login(this.loginForm).then((res) => {
            if (res.data.state == '20000') {
              localStorage.setItem('token', res.data.data)
              const parts = res.data.data.split('.');
              const decodedPayload = JSON.parse(atob(parts[1]));
              console.log(decodedPayload);
              this.$store.commit('setuserId', decodedPayload.id)
              this.$store.commit('setuserName', decodedPayload.username)
              this.$message({
                message: '登录成功,跳转至主页',
                type: 'success',
              });
              if (this.remember == true) {
                localStorage.setItem("userId", this.loginForm.username);
                localStorage.setItem("name", this.loginForm.password);
              } else {
                localStorage.removeItem('name')
                localStorage.removeItem('userId')
              }
              this.loginForm = {}
              this.$router.push('/homepage');

            } else {
              this.loginForm={
                username:'',
                password:''
              }
              this.$message.error(res.data.message);
            }
          })
        } else {
          console.log('登录表单验证失败');
          return false;
        }
      });
    },
    //跳转到详情页
    toDetail() {
      this.$router.push('/detail');
    },
    //跳转到地区选择公告
    toSelection(num) {
      if (num == '1' || num == '2') {
        this.$router.push('/selection');
      } else {
        this.$router.push('/ruzhujg');
      }
    },

    //跳转到信息公告
    toGonggao(where) {
      if (where == 'tab') {
        this.activeTab = 'list1'
        this.currentPage.type = '0'
        this.getgongGao()
      } else if (where == 'list') {
        this.$router.push('/gonggao');
      }
    },
    //登录页提示未登录
    error(selector) {
      this.$message.error('请先登录后再查看,正在帮您跳转！');
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      });
    },
    //跳转到信息公示
    toGongshi(where) {
      if (where == 'tab') {
        this.activeTab = 'list2'
        this.currentPage.type = '1'
        this.getgongGao()
      } else if (where == 'list') {
        this.$router.push('/gongshi');
      }
    },
    getCaptcha() {
      if (this.registerForm.phone) {
        user_send({ phone: this.registerForm.phone }).then(res => {
          if (res.data.state == '20000') {
            this.$message({
              message: '验证码发送成功',
              type: 'success'
            });
          }
        })
      }

    },
    //重置密码
    resetPass() {

      const Base64 = require("js-base64").Base64
      this.registerForm.password = Base64.encode(this.registerForm.password);

      user_reset({ phone: this.registerForm.phone, password: this.registerForm.password, yzm: this.registerForm.captcha }).then((res) => {
        console.log(res);
        if (res.data.state == 20000) {
          this.$message({
            message: '修改密码成功,去往登录页',
            type: 'success'
          });
          this.registerForm = {}
          this.isreset = false
        }
      })
    },
    getgongGao() {
      gonggao_list({ page: this.currentPage.page, size: this.currentPage.size, type: this.currentPage.type }).then((res) => {
        if (res) {
          this.gonggaolist = res.data.data.records
          this.gonggaolist = res.data.data.records.map(item => ({
            ...item,
            gmtCreate: new Date(item.gmtCreate).toISOString().slice(0, 10)
          }));
        }
      })
    },
    tocount() {
      this.$router.push('/countnum');
    },
    tozixun() {
      this.$router.push('/zixun');
    },
    toRongzi() {
      this.$router.push('/rongzi');
    },
    goToRegister() {
      // 跳转到注册账号页面
      this.$router.push('/register');
    },
    goToForgetPassword() {
      // 跳转到忘记密码页面
      this.isreset = !this.isreset
      // if(this.isreset)
    },
    keyDown(e) {
      if (e.keyCode == 13) {
        this.submitForm()
      }
    },
    zixuncount() {
      message_zixunCount().then((res) => {
        this.zixunCount = res.data.data
      })
    }
  },
  mounted() {
    this.isreset = false
    if (localStorage.getItem('token'))
      this.$router.push('/homepage');
    // this.getgongGao()
    this.zixuncount()
    if (localStorage.getItem('userId')) {
      const Base64 = require("js-base64").Base64
      this.loginForm.username = localStorage.getItem("userId");
      this.loginForm.password = Base64.decode(localStorage.getItem("name"));// base64解密
      // this.loginForm.password = localStorage.getItem("name");
      this.remember = true
    }
    // message_tousuCount().then((res) => {
    //   this.tousuCount = res.data.data
    // })
    // message_yijianCount().then((res) => {
    //   this.yijianCount = res.data.data
    // })

    window.addEventListener("keydown", this.keyDown)

  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  },
  components: {
    RegPublicHead,
    PublicFoot
  }
}
</script>

<style scoped lang="scss" >
.toadmin {
  text-decoration: none;
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #409EFF;
  line-height: 12px;
}

.tiaozhuan {
  display: flex;
  justify-content: center;
  width: 100%;
  color: #0072FF;
}

.active {
  color: white !important;
}

.content {
  width: 1220px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.loginList {
  width: 100%;
  height: 533px;
  background: url('../assets/img/reset/banner.png') no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;

  .loginBox {
    position: absolute;
    right: 14%;
    width: 362px;
    height: 458px;
    top: 4.5%;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-sizing: border-box;
  }
}

.shifan {
  overflow: hidden;
  width: 100%;
  height: 530px;
  background: url('../assets/img/shifan.png');
  background-size: 100% 100%;
  transform: scale(1.1);
  box-sizing: border-box;

  .shifanBox {
    width: 91%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
      width: 370px;
      height: 356px;
      background: #FFFFFF;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;

      .image {
        width: 99px;
        height: 99px;
        margin-top: 3rem;

        img {
          width: 100%;
          height: 100%;

        }
      }

      .text-1 {
        color: #3C4D7D;
        height: 35px;
        margin-top: 10px;
        text-align: center;
        line-height: 35px;
        font-size: 27px;
      }

      .text-2 {
        width: 100%;
        height: 11px;
        font-size: 12px;
        margin-top: 5px;
        color: #3C4D7D;
        text-align: center;
        letter-spacing: 2px;
        font-family: "Microsoft YaHei", sans-serif;
      }

      .text-3 {
        width: 180px;
        margin-top: 20px;
        color: #3C4D7D;
        text-align: center;
        cursor: pointer;

        .el-button {
          width: 100%;
          background-color: #F1F9FF;
          color: #0066FF;
          margin-bottom: 10px;
          margin: 5px 0px;

          &:hover {
            background-color: #0066FF;
            color: white;
          }
        }
      }

      .text-4 {
        color: #3C4D7D;
      }
    }

    .box:nth-of-type(2) {
      margin: 0px 55px;
    }
  }
}

.gonggao {
  width: 100%;
  height: 776px;
  background: url('../assets/img/gonggao.png');
  background-size: 102% 100%;
  padding-top: 80px;
  box-sizing: border-box;

  .gonggaoBox {
    width: 1220px;
    height: 520px;
    background: #DDEAFE;
    box-sizing: border-box;
    padding: 30px;
    position: relative;

    .listButton {
      position: absolute;
      bottom: 4%;
      left: 50%;
      transform: translateX(-50%);
      margin: 0 auto;
      background-color: #006EFF;
      width: 200px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: white;
      border-radius: 20px;
      cursor: pointer;
      left: 50%;
    }

    .gonggaoTitle {
      display: flex;
      position: absolute;
      top: -17%;
      left: 33%;

      .left {
        margin-right: 50px;
        text-align: center;

        p {
          cursor: pointer;
        }

        p:nth-of-type(1) {
          margin: 0;
          width: 100%;
          height: 44px;
          font-size: 45px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #62D1FF;
          line-height: 36px;
        }

        p:nth-of-type(2) {
          color: #62D1FF;
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
        }
      }

      .right {

        text-align: center;

        p {
          cursor: pointer;
        }

        p:nth-of-type(1) {
          color: #62D1FF;
          margin: 0;
          width: 100%;
          height: 44px;
          font-size: 45px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 36px;
        }

        p:nth-of-type(2) {
          margin: 0;
          color: #62D1FF;
          font-family: Arial, Helvetica, sans-serif;
        }
      }
    }

    .item {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0px 10px;
      cursor: pointer;

      &:hover {
        background-color: white;
        border-left: #1CA9FF 5px solid;
      }

      .sanjiao {
        position: relative;
        /* 相对定位，用于定位伪元素 */
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #F56505;

        margin-right: 15px;
      }

      div:nth-of-type(2) {
        width: 68px;
        height: 27px;
        background: #FBF4F4;
        border: 1px solid #D82E00;
        border-radius: 5px 5px 5px 5px;
        color: #D82E00;
        text-align: center;
        line-height: 27px;
        margin-right: 20px;
      }

      div:nth-of-type(3) {
        width: 935px;
        height: 18px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #202D40;
        line-height: 20px;
      }
    }

  }
}

.qiye {
  width: 100%;
  height: 515px;
  background: url('../assets/img/qiye.png');
  background-size: 102% 100%;

  .qiyeBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;

    .qiyeBoxTitle {
      position: absolute;
      top: -60%;
      left: 43%;
      text-align: center;

      .zuo {
        position: relative;

        img {
          position: absolute;
          width: 280px;
          height: 5px;
          background-color: #ccc;
          left: 10%;
          bottom: 1%;
        }
      }

      p:nth-of-type(1) {
        margin: 0;
        width: 180px;
        height: 44px;
        font-size: 45px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }

      p:nth-of-type(2) {
        margin: 0;
        width: 169px;
        height: 10px;
        font-size: 12px;
        font-family: Arial;
        font-weight: 400;
        color: #7E7E7E;
        line-height: 36px;
        letter-spacing: 4px;
    margin-top: 5px;
      }
    }

    .item {
      width: 300px;
      height: 165px;
      background: #FFFFFF;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.6s;

      &:hover {
        transform: scale(1.1);
      }

      .left {
        img {
          width: 73px;
          height: 64px;
          margin-right: 20px;

        }
      }

      .right {
        .xuqiu {
          width: 111px;
          height: 14px;
          font-size: 18px;
          font-family: Arial;
          font-weight: 400;
          color: #073958;
          line-height: 1px;
        }

        div {
          margin-bottom: 10px;
          width: 42px;
          height: 29px;
          font-size: 40px;
          font-family: Arial;
          font-weight: bold;
          color: #EB7400;
          line-height: 10px;
        }

        p {
          margin: 0;
          width: 100px;
          height: 25px;
          font-size: 25px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #073958;
          line-height: 3px;
        }
      }
    }
  }
}

.form-title {
  text-align: center;
}

.el-form-item {
  text-align: center;

}

.el-form {
  padding: 20px;
}

.form-title {
  margin-top: 50px;
}
</style>